<template>
  <view>
    <view class="content relative">
      <view class="shadow"></view>
      <view class="list_box">
        <view class="list">
          <view class="item title_box u-f-ac u-f-jsb">
            <view class="u-f-ajc" style="width: 35%;">中奖账号</view>
            <view class="u-f-ajc" style="width: 25%;">彩蛋颜色</view>
            <view class="u-f-ajc" style="width: 20%;">奖池</view>
            <view class="u-f-ajc" style="width: 20%;">奖金</view>
          </view>

          <view class="item u-f-ac u-f-jsb" v-for="(item, index) in list" :key="index">
            <view class="u-f-ajc" style="width: 35%;"><text v-if="item.mobile">{{item.mobile | secrecyMobile}}</text></view>
            <view class="u-f-ajc" style="width: 25%;">
              <image v-if="item.thumbnail" :src="item.thumbnail" mode="widthFix"></image>
            </view>
            <view class="u-f-ajc" style="width: 20%;">{{item.balance}}</view>
            <view class="u-f-ajc" style="width: 20%;">{{item.win_bonus}}</view>
          </view>
        </view>
      </view>
    </view>

    <caidanTbbar :tabbar="3"></caidanTbbar>

  </view>
</template>

<script>
  import * as API_Mall from '@/api/malls.js';
  import caidanTbbar from './caidan_tabbar.vue'
  export default {
    components: {
      caidanTbbar
    },
    data() {
      return {
        params: {
          pageNo: 1,
          pageSize: -1,
        },
        res: {},
        list: [],
      }
    },
    onLoad() {
      this.getCrazyPools()
    },
    methods: {
      async getCrazyPools() {
        let res = await API_Mall.getCrazyPools(this.params)
        this.res = res
        this.list = res.records
      },


    },
  }
</script>

<style lang="scss">
  page {
    background-color: #E91536;
  }

  .content {
    padding: 60rpx 30rpx 200rpx;

    .shadow {
      width: 100%;
      height: 120rpx;
      background: #C6112D;
      border-radius: 30rpx;
    }

    .list_box {
      margin-top: -80rpx;
      width: 100%;
      padding: 0 10rpx;
    }

  }

  .list {
    width: 100%;
    background: #FFFCF0;
    border: 1px solid #FF6264;
    box-shadow: 0px 0px 10rpx 2rpx #FFE478;
    border-radius: 50rpx;
    padding: 40rpx 20rpx;

    .item {
      color: #8A3D06;
      padding: 16rpx 20rpx;
      border-bottom: 1px dashed #ccc;

      >view {
        width: 33.3%;
      }

      image {
        width: 30rpx;
      }
    }

    .title_box {
      background-color: #FFEBC2;
      // background-color: red;
      border-radius: 50rpx;
      padding: 8rpx 20rpx;
      font-weight: 700;
      border-bottom: none;
      margin-bottom: 10rpx;
    }
  }
</style>